<template>
  <div>
    <div class="mb-10px">
      <span>应用：</span>
      <Select
        v-model:value="selectReq.appId"
        :allowClear="true"
        :field-names="{ label: 'name', value: 'id' }"
        :options="appSelectList"
        placeholder="请选择应用"
        style="width: 200px"
      />
      <span class="ml-10px">所属企业：</span>
      <Select
        v-model:value="selectReq.tenantCode"
        :allowClear="true"
        :field-names="{ label: 'alias', value: 'code' }"
        :options="tenantSelectList"
        placeholder="请选择所属企业"
        style="width: 200px"
      />
      <span class="ml-10px mr-15px">请选择状态：</span>
      <Select
        v-model:value="selectReq.status"
        :allowClear="true"
        :field-names="{ label: 'name', value: 'code' }"
        :options="[
          { name: '正常', code: 'normal' },
          { name: '部署中', code: 'deploying' },
          { name: '释放', code: 'release' },
          { name: '部署失败', code: 'fail' },
        ]"
        placeholder="请选择状态"
        style="width: 150px"
      />
      <Button class="ml-20px mr-10px" @click="reset">重置</Button>
      <Button type="primary" @click="getList">查询</Button>
    </div>
  </div>
  <div>
    <div>
      <Table
        :columns="columns"
        :dataSource="deployTaskList"
        :loading="loading"
        :pagination="false"
        :scroll="scroll"
        bordered
        class="main-table"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operation'">
            <Button v-per="'detail'" type="link" :disabled="!record.instanceId" @click="handleView(record)"
              >查看详情</Button
            >
          </template>
        </template>
      </Table>
      <br />
      <Pagination
        v-model:current="current"
        v-model:pageSize="pageSize"
        :show-total="(total) => `共 ${total} 条`"
        :total="total"
        show-size-changer
        @showSizeChange="onShowSizeChange"
      />
    </div>
    <DetailsDrawer ref="detailsDrawerRef" />
  </div>
</template>

<script lang="ts" setup>
import { Button, Pagination, Select, Table } from 'ant-design-vue';
import { getTenantSideApps } from '/@/api/deployment-center/deployTask';
import { reactive, ref, watch } from 'vue';
import { columns } from './component/task.data';
import { DeployTaskListResultModel } from '/@/api/deployment-center/model/deployTaskModel';
import { getSaaSTenantNameList } from '/@/api/tenant-mgmt/enterprise-admin';
import { AppTemplateResp } from '/@/api/operation-center/common/model/commonModel';
import { SaaSTenantNameListItem } from '/@/api/tenant-mgmt/model/enterpriseAdminModel';
import DetailsDrawer from '/@/views/deployment-center/task/component/detailsDrawer.vue';
import { getJobResultList } from '/@/api/deployment-center/deployResult';

const scroll = ref<undefined | object>(undefined);
const loading = ref(true);
let detailsDrawerRef = ref();
let deployTaskList = ref<DeployTaskListResultModel[]>([]);
let appSelectList = ref<AppTemplateResp[]>([]);
let tenantSelectList = ref<SaaSTenantNameListItem[]>([]);
// 分页查询
let current = ref(1);
let pageSize = ref(10);
let total = ref(0);
let selectReq = reactive({
  current: current.value,
  size: pageSize.value,
  appId: '',
  tenantCode: '',
  status: '',
});

async function getList() {
  try {
    let params = {
      current: current.value,
      size: pageSize.value,
      appId: selectReq.appId,
      tenantCode: selectReq.tenantCode,
      status: selectReq.status,
    };
    let res = await getJobResultList(params);
    deployTaskList.value = res.items;
    total.value = res.total;
  } finally {
    loading.value = false;
  }
}

const onShowSizeChange = (cr: number, ps: number) => {
  pageSize.value = ps;
  current.value = cr;
  getList();
};
watch(pageSize, (val) => {
  if (val > 10) {
    scroll.value = { y: 500 };
  }
  selectReq.size = pageSize.value;
});
watch(current, () => {
  selectReq.current = current.value;
  getList();
});

// 下拉选择器获取应用列表数据
async function handleAppClick() {
  let res = await getTenantSideApps();
  appSelectList.value = res;
}

// 下拉选择器获取企业列表数据
async function handleTenantClick() {
  let res = await getSaaSTenantNameList();
  tenantSelectList.value = res;
}

function reset() {
  selectReq.tenantCode = '';
  selectReq.appId = '';
  selectReq.status = '';
}

function handleView(record: Recordable) {
  detailsDrawerRef.value.openDrawer(record);
}

getList();
handleTenantClick();
handleAppClick();
</script>
<style lang="less">
.ant-pagination {
  float: right;
}
</style>
